<template>
<div>显示用户</div>
  <div>
  <div>请输入用户名：
    <input type="text"  v-model="datareas.searchname">
    <button v-on:click="handleQueryAll">搜索</button></div>


  <ul>
    <li style="list-style-type: none"> id | loginName | name |</li>
    <li style="list-style-type: none" v-for="(item,index) in data"
        :key="index">
       |  {{item.loginName}}  | {{item.name}}
    </li>
  </ul>

  </div>

</template>

<script>
import axios from "axios";
import {onMounted, reactive, ref} from 'vue';
export default {
  name: "DisplayUser" ,

  setup(){
    const data = ref();

    const datareas = reactive({
      searchname:'',
      showToast:false,
      toastMessage:''
    })
    const searchByName = () => {

    }
    const handleQueryAll = () => {
      axios.get("http://localhost:8090/listall",{params:{
          loginName:datareas.searchname
        }}).then((resp) =>{
        console.log(resp.data);
        data.value = resp.data.content;
      }).catch((err) => {
      })
    };

    const handleResetPassword = (message) => {
      datareas.showToast = true;
      datareas.toastMessage = message;
    };

    onMounted(() =>{
      handleQueryAll();
    });
    return {
      handleQueryAll,
      data,
      datareas,
      handleResetPassword
    };
  }
}

</script>

<style scoped>

</style>